<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  
  <title>apple touch icon | Duger 博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  
    <meta name="author" content="Duger wang">
  
  
    <meta name="description" content="以前我们用过favicon在浏览器给网站进行身份标识，用法如下：
&amp;lt;link href=&quot;http://image.feeliu.com/web/favicon.ico&quot; rel=&quot;shortcut icon&quot; /&amp;gt;  &amp;lt;link href=&quot;http://image.feeliu.com/web/favicon.ico&quot; rel=&quot;Bookmark&quot; /&amp;gt;

现今移动设备">
  
  <meta name="description" content="以前我们用过favicon在浏览器给网站进行身份标识，用法如下：
&lt;link href='http://image.feeliu.com/web/favicon.ico' rel='shortcut icon' /&gt;  &lt;link href='http://image.feeliu.com/web/favicon.ico' rel='Bookmark' /&gt;

现今移动设备">
<meta property="og:type" content="article">
<meta property="og:title" content="apple touch icon">
<meta property="og:url" content="http://www.autonavi.me/2014/03/31/apple-touch-icon.html">
<meta property="og:site_name" content="Duger 博客">
<meta property="og:description" content="以前我们用过favicon在浏览器给网站进行身份标识，用法如下：
&lt;link href='http://image.feeliu.com/web/favicon.ico' rel='shortcut icon' /&gt;  &lt;link href='http://image.feeliu.com/web/favicon.ico' rel='Bookmark' /&gt;

现今移动设备">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="apple touch icon">
<meta name="twitter:description" content="以前我们用过favicon在浏览器给网站进行身份标识，用法如下：
&lt;link href='http://image.feeliu.com/web/favicon.ico' rel='shortcut icon' /&gt;  &lt;link href='http://image.feeliu.com/web/favicon.ico' rel='Bookmark' /&gt;

现今移动设备">

  
  
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
  
  <link rel="stylesheet" href="/css/style.css" type="text/css">

  <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-49504269-3']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

</head>

<body>
  <div class="wrapper">
    <header id="header">
  <div class="title">
    <h1><a href="/">Duger 博客</a></h1>
    <p><a href="/">iOS小生</a></p>
  </div>
  <nav class="nav">
    <ul>
      
        <li><a href="/">Home</a></li>
      
        <li><a href="/archives">Archives</a></li>
      
        <li><a href="/about">About</a></li>
      
        <li><a href="/atom.xml">RSS</a></li>
      
      
    </ul>
    <div class="clearfix"></div>
  </nav>
  <div class="clearfix"></div>
</header>
    <div class="content"><article class="post">
  <header>
    
      <div class="icon"></div>
      <a href="/2014/03/31/apple-touch-icon.html">
  <time datetime="2014-03-30T16:00:00.000Z">
    2014年 3月 31日
  </time>
</a>
    
    
  
    <h1 class="title">apple touch icon</h1>
  

  </header>
  
  <div class="entry">
    
      <p>以前我们用过favicon在浏览器给网站进行身份标识，用法如下：</p>
<figure class="highlight"><pre><div class="line">&lt;link <span class="variable">href=</span><span class="string">"http://image.feeliu.com/web/favicon.ico"</span> <span class="variable">rel=</span><span class="string">"shortcut icon"</span> /&gt;  </div><div class="line">&lt;link <span class="variable">href=</span><span class="string">"http://image.feeliu.com/web/favicon.ico"</span> <span class="variable">rel=</span><span class="string">"Bookmark"</span> /&gt;</div></pre></figure>

<p>现今移动设备越来越多，苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上，方便用户以后访问。实现方法是在HTML文档的<code>&lt;head&gt;</code>标签加入下面代码即可。</p>
<pre><code>&lt;link <span class="variable">rel=</span><span class="string">"apple-touch-icon"</span> <span class="variable">href=</span><span class="string">"/custom_icon.png"</span>/&gt;   
</code></pre><p>apple-touch-icon 标签支持sizes属性，可以用来放置对应不同的设备。</p>
<p>57×57（默认值）的图标对应320×640的iphone老设备，72×72对应ipad，114×114对应retina屏的iPhone及iTouch。ipad3对应144×144的高分辨率。<br><a id="more"></a><br>所以最完善的写法应该是：</p>
<pre><code>&lt;link <span class="variable">rel=</span><span class="string">"apple-touch-icon"</span> <span class="variable">sizes=</span><span class="string">"57x57"</span> <span class="variable">href=</span><span class="string">"touch-icon-iphone.png"</span> /&gt;  
&lt;link <span class="variable">rel=</span><span class="string">"apple-touch-icon"</span> <span class="variable">sizes=</span><span class="string">"72x72"</span> <span class="variable">href=</span><span class="string">"touch-icon-ipad.png"</span> /&gt;  
&lt;link <span class="variable">rel=</span><span class="string">"apple-touch-icon"</span> <span class="variable">sizes=</span><span class="string">"114x114"</span> <span class="variable">href=</span><span class="string">"touch-icon-iphone4.png"</span> /&gt;    
&lt;link <span class="variable">rel=</span><span class="string">"apple-touch-icon"</span> <span class="variable">sizes=</span><span class="string">"144x144"</span> <span class="variable">href=</span><span class="string">"apple-touch-icon-ipad3-144.png"</span> /&gt;  
</code></pre><p>虽然官方都用的png图片做说明，但实际测试jpg格式也可用（不推荐），图片无需做圆角和高光效果，同Native App一样，系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果，可以用apple-touch-icon-precomposed代替apple-touch-icon，这时我们提供的图标就要自己做圆角和高亮效果了。</p>
<p>图标搜索的优先级如下：<br>如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。<br>如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。<br>如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。<br>如果未在区域指定用link标签指定图标，会自动搜索网站根目录下有apple-touch-icon…或者 apple-touch-icon-precomposed…前缀的图标。 如设备推荐尺寸为57x57,优先级如下：</p>
<ul>
<li><p>apple-touch-icon-57×57-precomposed.png</p>
</li>
<li><p>apple-touch-icon-57×57.png</p>
</li>
<li><p>apple-touch-icon-precomposed.png</p>
</li>
<li><p>apple-touch-icon.png</p>
<p>在第三代 iPad 上有四种图标规格： 57x57, 72x72, 114x114, 144x144.</p>
</li>
</ul>
<p>由于 retina 图标的尺寸是标准图标大小的2倍，因此实际上我们只需要只做2款图标即可：114 x 114 和 144 x 144 。 将retina 图标的大小设置成标准图标的尺寸，那么IOS就会根据情况自动进行缩放了。</p>
<p><!-- Standard iPhone -->  </p>
<p><link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png"><br><!-- Retina iPhone -->  </p>
<p><link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png"><br><!-- Standard iPad -->  </p>
<p><link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png"><br><!-- Retina iPad -->  </p>
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png">  

    
  </div>
  <footer>
    
      
  <div class="categories">
    <a class="categories-link" href="/categories/技术/">技术</a>, <a class="categories-link" href="/categories/技术/iOS/">iOS</a>
  </div>

      
  <div class="tags">
    <a class="tags-link" href="/tags/iOS/">iOS</a>
  </div>

    
    <div class="clearfix"></div>
  </footer>
</article>


<section id="comment">
  <h1 class="title">评论</h1>
  <div class="ds-thread" data-title="apple touch icon">
  </div>
</section>
</div>
  </div>
  <div class="widget-wrapper">
    <aside id="sidebar">
  
  
    
      
      

<div class="widget tag first">
  <h3 class="title">categories</h3>
  <ul class="entry">
  
    <li><a href="/categories/技术/C/">C</a><small>1</small></li>
  
    <li><a href="/categories/技术/Git/">Git</a><small>2</small></li>
  
    <li><a href="/categories/技术/Hexo/">Hexo</a><small>1</small></li>
  
    <li><a href="/categories/技术/iOS/">iOS</a><small>8</small></li>
  
    <li><a href="/categories/只言片语/">只言片语</a><small>2</small></li>
  
    <li><a href="/categories/技术/">技术</a><small>17</small></li>
  
    <li><a href="/categories/随笔/">随笔</a><small>1</small></li>
  
  </ul>
</div>

    
      
      

<div class="widget tagcloud">
  <h3 class="title">标签云</h3>
  <div class="entry">
    <a href="/tags/Apache/" style="font-size: 10.00px;">Apache</a><a href="/tags/C/" style="font-size: 10.00px;">C</a><a href="/tags/Certificates/" style="font-size: 10.00px;">Certificates</a><a href="/tags/ContOS/" style="font-size: 10.00px;">ContOS</a><a href="/tags/Git/" style="font-size: 10.00px;">Git</a><a href="/tags/GitHub/" style="font-size: 10.00px;">GitHub</a><a href="/tags/Google字体/" style="font-size: 10.00px;">Google字体</a><a href="/tags/Jekyll/" style="font-size: 10.00px;">Jekyll</a><a href="/tags/LAMP/" style="font-size: 15.00px;">LAMP</a><a href="/tags/Mac/" style="font-size: 10.00px;">Mac</a><a href="/tags/NSDictionary/" style="font-size: 10.00px;">NSDictionary</a><a href="/tags/NSString/" style="font-size: 10.00px;">NSString</a><a href="/tags/Phabricator/" style="font-size: 10.00px;">Phabricator</a><a href="/tags/Profiles/" style="font-size: 10.00px;">Profiles</a><a href="/tags/SourceTree/" style="font-size: 15.00px;">SourceTree</a><a href="/tags/XCode/" style="font-size: 10.00px;">XCode</a><a href="/tags/Xcode/" style="font-size: 10.00px;">Xcode</a><a href="/tags/code-review/" style="font-size: 10.00px;">code review</a><a href="/tags/delegate/" style="font-size: 10.00px;">delegate</a><a href="/tags/iOS/" style="font-size: 20.00px;">iOS</a><a href="/tags/jekyll/" style="font-size: 10.00px;">jekyll</a><a href="/tags/nil/" style="font-size: 10.00px;">nil</a><a href="/tags/setter/" style="font-size: 10.00px;">setter</a><a href="/tags/人生/" style="font-size: 10.00px;">人生</a><a href="/tags/博客/" style="font-size: 10.00px;">博客</a><a href="/tags/春天/" style="font-size: 10.00px;">春天</a><a href="/tags/苹果证书/" style="font-size: 10.00px;">苹果证书</a>
  </div>
</div>

    
      
      

<div class="widget recent-posts">
  <h3 class="title">最近的文章</h3>
  <ul class="entry">
    
      <li>
        <a href="/2015/08/17/SourceTree中使用BeyondCompare作为默认对比工具.html">SourceTree中使用BeyondCompare作为默认对比工具</a>
      </li>
    
      <li>
        <a href="/2014/09/09/Hexo加载过慢.html">HEXO个人博客速度优化</a>
      </li>
    
      <li>
        <a href="/2014/08/01/hello-world.html">Hello World</a>
      </li>
    
      <li>
        <a href="/2014/04/26/setup-phabricator-on-aliyun.html">在CentOS上搭建Phabricator</a>
      </li>
    
      <li>
        <a href="/2014/04/04/beauly-fade-love-stay.html">Beauly fade Love stay</a>
      </li>
    
  </ul>
</div>

    
  
</aside>
<div class="clearfix"></div>
  </div>
  <footer id="footer"><div class="copyright">
  
  &copy; 2015 <a href="/">Duger wang</a>
  
</div>
<div class="theme-copyright">
  Theme by <a href="https://github.com/orderedlist" target="_blank">orderedlist</a>
   | 
  Redesign by <a href="http://heroicyang.com/" target="_blank">Heroic Yang</a>
</div>
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">
	本站总访问量<span id="busuanzi_value_site_pv" style="color:white"></span>次
</span>
<div class="clearfix"></div></footer>
  <script src="//ajax.useso.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="/js/scale.fix.js"></script>
<script src="/js/jquery.imagesloaded.min.js"></script>
<script src="/js/gallery.js"></script>


<script type="text/javascript">
  var duoshuoQuery = { short_name: 'duger' };
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';
    ds.async = true;
    ds.src = 'http://static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
</script>



<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" media="screen" type="text/css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
  (function($){
    $('.fancybox').fancybox();
  })(jQuery);
</script>

</body>
</html>